<script>
import {ref, watchEffect} from "vue";

export default {
  name: "App",
  setup(props, context) {
    let count = ref(0)

    /*
    watchEffect()：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。

    */
    /*
      watchEffect传入的函数默认会立即执行
      在执行的过程中会自动的收集依赖(依赖哪些响应式的数据)
      返回值是一个用来停止该副作用的函数。
    */
    let stop = watchEffect(() => {
      if (count.value === 10) {
        // 停止监听
        stop()
      }
      console.log(count.value)
    })
    return {
      count
    }
  }
}
</script>
<template>
  <div id="app">
    <h1 @click="count++">{{ count }}</h1>
  </div>
</template>

<style lang="less"></style>
